<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content el-container is-vertical">
            <h2 class="pagetitle">{{$t('l.personal_14')}}</h2>
            <div class="personCon el-main">
                <div class="createpanel clearfix">
                    <h2 class="persontitle">{{$t('l.personal_15')}}</h2>
                    <div class="leftbar">
                        <p class="title">{{$t('l.personal_16')}}</p>
                        <div class="putgroup clearfix">
                            <input class="comput small" :placeholder="$t('l.personal_17')" v-model="remark" style="width:100%;">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_18')}}</p>
                        <div class="putgroup clearfix">
                            <input class="comput small" :placeholder="$t('l.personal_19')" v-model="ip" style="width:100%;">
                            <p class="errortext"></p>
                        </div>
                        <a class="btn changebtn" @click="checkapi">{{$t('l.personal_20')}}</a>
                    </div>
                    <div class="rightbar">
                        <h3 class="tip">{{$t('l.personal_21')}}</h3>
                        <p class="tipitem">{{$t('l.personal_22')}}。</p>
                        <p class="tipitem">{{$t('l.personal_23')}}</p>
                        <p class="tipitem">{{$t('l.personal_24')}}</p>
                    </div>   
                </div>
                <div class="createpanel clearfix">
                    <h2 class="persontitle">{{$t('l.personal_25')}}</h2>
                    <div class="apikey">
                        <table class="apikeytable">
                            <thead>
                                <tr>
                                    <th>{{$t('l.personal_26')}}</th>
                                    <th>{{$t('l.personal_28')}}</th>
                                    <th>{{$t('l.personal_29')}}</th>
                                    <th>{{$t('l.personal_30')}}</th>
                                    <th>{{$t('l.personal_31')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in apilist" :key="index">
                                    <td>{{item.apiName}}</td>  
                                    <td>{{item.apiId}}</td>
                                    <td>{{item.ip}}</td>
                                    <td><p class="status">{{$t('l.personal_32')}}</p></td>
                                    <td>
                                        <a class="probtn" :class="delItem==index?'active':''" @click="delItem = index">{{$t('l.personal_33')}}
                                            <div class="delapikey">
                                                <p class="deltip">{{$t('l.personal_34')}}？</p>
                                                <div>
                                                    <a class="smallbtn" @click.stop="delItem=-1">{{$t('l.personal_35')}}</a>
                                                    <a class="smallbtn active" @click="removeKey(item)">{{$t('l.personal_36')}}</a>
                                                </div>
                                            </div>
                                        </a>
                                    </td>  
                                </tr>
                                <tr  v-if="apilist && apilist.length==0">
                                    <td colspan="5">
                                        <div class="nodata" style="padding:80px 0">
                                            <img src="../../assets/images/7c57ae4.svg">
                                            <p style="text-align: center;    color: #33385E;    line-height: 20px;    padding-top: 3px;">{{$t('l.personal_140')}}</p>
                                        </div>
                                    </td>
                                </tr>  
                            </tbody>
                        </table>
                    </div>
                </div>    
            </div>
        </div>
        <div class="popWraper" v-show="apipopshow">
            <div class="popInter" style="width:655px;height:560px;">
                <div class="popHead">
                    <h2>{{$t('l.personal_37')}}</h2>
                    <i class="close" @click="apipopshow = false"></i>
                </div>
                <div class="popbody">
                    <div class="apipopcon">
                        <p class="apititle">Api Key</p>
                        <div class="apigroup">
                            <input v-model="apikey" disabled="disabled">
                            <span v-clipboard:copy="apikey" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('l.personal_38')}}</span>
                        </div>
                        <p class="apititle">Secret Key</p>
                        <div class="apigroup">
                            <input v-model="secretkey" disabled="disabled">
                            <span v-clipboard:copy="secretkey" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('l.personal_38')}}</span>
                        </div>
                        <p class="apititle">{{$t('l.personal_39')}}</p>
                        <div class="apigroup">
                            <input v-model="bindip" disabled="disabled" >
                        </div>
                        <div class="apitipbox">
                            <i></i>
                            <div class="fl" style="padding-left:16px;">
                                <h2>{{$t('l.personal_40')}}</h2>
                                <p>{{$t('l.personal_41')}}</p>
                            </div>
                        </div>
                        <a class="btn fr" style="width:157px;height:40px;line-height:40px;margin-top:34px;" @click="apipopshow = false">{{$t('l.personal_36')}}</a>
                    </div>
                </div>        
            </div>    
        </div>
        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" value="135****123" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="popconfirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" value="135****123" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="popconfirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--谷歌校验-->
        <div class="popWraper" v-show="ischeck && status=='ga'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_47')}}</p>
                        <input class="comput small" v-model="verifyCode" :placeholder="$t('l.personal_44')" style="width:100%;">
                        <a class="btn allcell martop30" @click="popconfirm">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
// import VueClipboard from 'vue-clipboard2'
// Vue.use(VueClipboard)
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data() {
        return {
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            account:"",
            remark:"",
            ip:"",
            pageNum:1,
            pageSize:5,
            apilist:[],
            delItem:-1,
            setPro:'',
            verifyCode:'',
            apipopshow:false,
            secretkey:"",
            apikey:"",
            bindip:"",
            api:{
                link:'api.html',
                name:this.$t('l.add_63')
            }
        }
    },
    created(){
        let intro = this.$store.state.userintro;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
    },
    methods:{
        // 复制成功
        onCopy(e){
            this.$layer.msg(this.$t('l.personal_48'));
        },
        // 复制失败
        onError(e){
            this.$layer.msg(this.$t('l.personal_49'));
        },
        setProData(data){
            this.ischeck = true;
            this.setPro = data;
        },
        popconfirm(){
            if(this.setPro=='add'){
                this.addApi();
            }else if(this.setPro=='del'){
                this.removeApi();
            }
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }, 
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCode({
                email:that.account,
                type:"A"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_50'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.$store.state.userintro.phoneArea,
                phone:that.account,
                type:"A"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_50'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //api添加
        async addApi(){
            let that = this;
            if(that.verifyCode==""){
                that.$layer.msg(that.$t('l.personal_51'));
                return;
            }
            let res = await api.createApi({
                ip:that.ip,
                remark:that.remark,
                verifyCode:that.verifyCode
            })
            if(res.data.code==0){
                 that.ischeck = false;
                 that.ip = "";
                 that.remark = "";
                 that.verifyCode = "";
                 that.$layer.msg(that.$t('l.personal_52'));
                  that.apipopshow = true;
                  that.apikey = res.data.data.apiId;
                  that.secretkey = res.data.data.apiSecret;
                  that.bindip = res.data.data.ip;
                 that.getapiList();
            }else if(res.data.code==1070009){
                that.$layer.msg(that.$t('l.add_88'));
            }else if(res.data.code==1070010){
                that.$layer.msg(that.$t('l.add_118'));
            }else if(res.data.code==1050002){
                that.$layer.msg(that.$t('l.add_116'));
            }else if(res.data.code==1050003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==1010003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        removeKey(item){
            this.ischeck = true;
            this.setPro = 'del';
            this.delKey = item;
        },
        //api删除
        async removeApi(){
            let that = this;
            if(that.verifyCode==""){
                that.$layer.msg(that.$t('l.personal_51'));
                return;
            }
            let res = await api.deleteList([that.delKey.apiKeyId,that.verifyCode]);
            if(res.data.code==0){
                 that.ischeck = false;
                 that.delItem = -1;
                 that.verifyCode = "";
                 that.$layer.msg(that.$t('l.personal_53'));
                 that.getapiList();
            }else if(res.data.code==1070009){
                that.$layer.msg(that.$t('l.add_88'));
            }else if(res.data.code==1070010){
                that.$layer.msg(that.$t('l.add_118'));
            }else if(res.data.code==1050002){
                that.$layer.msg(that.$t('l.add_116'));
            }else if(res.data.code==1050003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==1010003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //api列表
        async getapiList(){
            let that = this;
            let res = await api.apiList({
                pageNum:that.pageNum,
                pageSize:that.pageSize
            })
            if(res.data.code==0){
                that.apilist = res.data.data.records
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        checkapi(){
            let that = this;
            if(that.remark==""){
                that.$layer.msg(that.$t('l.personal_54'));
                return;
            }
            that.ischeck = true;
            that.setPro = 'add'
        }
    },
    mounted(){
        this.getapiList();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.apipopcon{
    .apititle{
        font-size:14px;
        color:rgba(51,56,94,1);
        line-height:20px;
        padding-bottom:5px;
    }
    .apigroup{
        border-radius:4px;
        border:1px solid rgba(221,224,235,1);
        height:40px;
        padding:8px;
        box-sizing: border-box;
        margin-bottom:24px;
        input{
            width:80%;
            float:left;
            color:#33385E;
        }
        span{
            float:right;
            padding:0 18px 0 26px;
            font-size:14px;
            color:#2D8DFE;
            line-height:20px;
            border-left:1px solid #DDE0EB;
            cursor:pointer;
        }
    }
    .apitipbox{
        background:rgba(255,251,230,1);
        border-radius:4px;
        border:1px solid rgba(255,229,143,1);
        height:87px;
        padding:16px 24px;
        box-sizing: border-box;
        i{
            float:left;
            width:24px;
            height:24px;
            background:url(../../assets/images/tip1.png) no-repeat center;
            background-size:100% 100%;
        }
        h2{
            font-size:16px;
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:24px;
        }
        p{
            color:rgba(51,56,94,1);
            line-height:22px;
            padding-top:4px;
        }
    }
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .createpanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        box-sizing: border-box;
        margin-bottom:24px;
        .leftbar{
            float:left;
            width:40%;
            padding-top:46px;
            padding-left :14px;
            box-sizing: border-box;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
        .rightbar{
            float:right;
            width:50%;
            padding-top:44px;
            padding-right:5%;
            box-sizing: border-box;
            .tip{
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:22px;
                padding-bottom:13px;
            }
            .tipitem{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
                padding-left:24px;
                margin-left:-24px;
                background:url(../../assets/images/xing.png) no-repeat left top 3px;
                padding-bottom:34px;
                background-size:20px 20px;
            }
        }
        .apikey{
            .apikeytable{
                width:100%;
                thead tr{
                    background:#f2f6fa;
                    th{
                        line-height:50px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        font-size:14px;
                    }
                }
                tbody tr{
                    border-bottom:1px solid #F2F6FA;
                    td{
                        font-size:14px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:50px;
                        text-align:center;
                        .status{
                            position:relative;
                            padding-left:14px;
                            display: inline-block;
                            &:after{
                                position:absolute;
                                content:"";
                                width:6px;
                                height:6px;
                                left:4px;
                                top:22px;
                                border-radius:50%;
                                background:#52C41A;
                            }
                        }
                        .probtn{
                            font-size:14px;
                            font-weight:400;
                            color:#2D8DFE;
                            line-height:50px;
                            padding:0 10px;
                            height: 50px;
                            display: block;
                            position:relative;
                            cursor:pointer;
                            &.active{
                                .delapikey{display:block;}
                            }
                        }
                        .delapikey{
                            position:absolute;
                            background:#fff;
                            border-radius:4px;
                            padding:18px;
                            width: 220px;
                            box-sizing: border-box;
                            box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
                            z-index: 9;
                            top: -90px;
                            right: 15px;
                            padding-bottom: 4px;
                            display:none;
                            &:after{
                                content:"";
                                position:absolute;
                                width:10px;
                                height:6px;
                                background:url(../../assets/images/Triangle1@2x.png) no-repeat center;
                                bottom:-6px;
                                right:67px;
                            }
                            p{
                                color:rgba(51,56,94,1);
                                line-height:22px;
                                padding-left:20px;
                                text-align: left;
                                background:url(../../assets/images/tip1.png) no-repeat center left;
                                background-size: 16px 16px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>



